import React, {FC} from 'react';
import "./index.less";
import HxScrollMenu from "@/components/HxScrollMenu";
import {HxJournalCoverItem} from '@/components/HxJournal';
import {useRequest} from "ahooks";
import * as API from "@/services";


interface JournalDisplayCasesProps {
}

const JournalDisplayCases: FC<JournalDisplayCasesProps> = (props) => {
  const journalsReq = useRequest(() => API.queryFrontJournals({
    pageSize: 1000,
    sort: ["id,desc"],
  }), {});
  return (
    <div className={"journal-display-cases-container"}>
      <HxScrollMenu>
        {
          journalsReq.data?.data?.map((journal) => (
            <HxJournalCoverItem key={journal.id} journal={journal}/>
          ))
        }
      </HxScrollMenu>
    </div>
  );
};

export default JournalDisplayCases;
